<template>
	<view class="content">
		<g-common-navbar height="2"></g-common-navbar>
		<!-- 顶部用户名称卡片区域 -->
		<g-my-user-box></g-my-user-box>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @click="toUserWallet" icon="rmb-circle" title="钱包"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item v-for="(item,index) in contentList" :key="index" @click="toContent(item.id)" :icon="item.icon" :title="item.title"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item @click="toUserSetup" icon="setting" title="设置"></u-cell-item>
			</u-cell-group>
		</view>
		<g-tabbar></g-tabbar>
	</view>
</template>

<script>
	import UserForm from '@/common/UserForm.js'
	import Storage from '@/common/Storage.js'
	export default {
		computed: {},
		data() {
			return {
				contentList: []
			}
		},
		onShow() {
			// 获取 contentList 并渲染
			this.renderContentList()
		},
		methods: {
			toUserWallet() {
				UserForm.vLogin(() => {
					// 验证是否登录
					uni.navigateTo({
						url: '/pages/user/wallet'
					})
				})
			},
			toUserSetup() {
				UserForm.vLogin(() => {
					// 验证是否登录
					uni.navigateTo({
						url: '/pages/user/setup'
					})
				})
			},
			renderContentList() {
				let key = 'pages_my_index.data.contentList'
				Storage.get(key, (res) => {
					this.contentList = JSON.parse(JSON.stringify(res))
					this.$post({
						url: '/content/list',
						success: (data) => {
							if (JSON.stringify(data) !== JSON.stringify(this.contentList)) {
								this.contentList = JSON.parse(JSON.stringify(data))
								Storage.set(key, data)
							}
						}
					})
				}, () => {
					this.$post({
						url: '/content/list',
						success: (data) => {
							if (data && data.length > 0) {
								this.contentList = data
								Storage.set(key, data)
							} else {
								this.contentList = []
							}
						}
					})
				})
			},
			toContent(id) {
				if (!id && parseInt(id) < 1) {
					return;
				}
				// 去内容也显示内容
				uni.navigateTo({
					url: '/pages/public/content?id=' + id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
